<template>
  <div class="orderStatus-page orderSuccess">
    <div class="ths"><p>谢谢您购买我们的产品！</p></div>
    <div class="success">
      <p class="title">支付成功</p>
      <p>请前往个人中心查看特权</p>
    </div>
    <div class="member-info">
      <div class="avatar-info">
        <ul>
          <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/avatar.png" alt="" class="avatar"></li>
          <li>{{userInfo.username}}</li>
        </ul>
      </div>
      <div class="info">
        <div>
          <ul>
            <li class="title">已购产品</li>
            <li class="amount">{{statisticsData.countProduct}}</li>
          </ul>
        </div>
        <div class="line"></div>
        <div>
          <ul>
            <li class="title">现有积分</li>
            <li class="amount">{{statisticsData.puchasePoint-statisticsData.disabledPuchasePoint}}<span class="gray_info">({{statisticsData.disabledPuchasePoint}})</span></li>
          </ul>
        </div>
        <div class="line"></div>
        <div>
          <ul>
            <li class="title">分享人数</li>
            <li class="amount">{{statisticsData.userShare}}</li>
          </ul>
        </div>
      </div>
    </div>
    <img class="toCenter" src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/toCenter.png" alt="" @click="toCenter()"></img>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { wxshare } from 'common/mixin'

export default {
    mixins:[wxshare],
    data() {
        return {
          userInfo:{},
          statisticsData:{}
        }

    },
    methods:{
      ...mapActions({
        GetInfo:'GetInfo',
        GetstatisticsData:'GetstatisticsData'
      }),
      toCenter:function(){
        this.$router.push({path:'personalCenter'});
      }
    },
    created() {
        this.GetInfo().then(result => {
          this.userInfo = result.data;
        });
        this.GetstatisticsData().then(result => {
          console.log('result test',result);
          this.statisticsData = result.data;
        })
    },  
}
</script>
<style lang="less">
@import './orderStatus.less';
</style>
